<template>
  <VPage class="app-container">
    <VTable v-if="isRefresh" ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <multiInput class="w-50" v-model="form.sku" placeholder="SKU"></multiInput>
        <SelectWarehouse class="w-40" v-model="form.warehouse_id" placeholder="仓库"></SelectWarehouse>
        <el-select v-model="form.wms_attribute" placeholder="仓库属性" style="max-width: 150px">
          <el-option v-for="item in options['base.warehouse']?.[0].wmsAttributeType" :key="item.value" :label="item.label"
            :value="item.value"></el-option>
        </el-select>
        <VGroup>
          <el-select class="selectClass" v-model="form.timeRange.type" style="max-width: 100px">
            <el-option v-for="item in timeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-date-picker v-model="form.timeRange.value" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime()" style="max-width: 300px" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <div class="w-full">
          <el-tabs v-model="activeName" class="pl-4 pr-4" @tab-change="handleChange">
            <el-tab-pane :label="item.label" :name="item.name" v-for="(item, index) in tabList"
              :key="index"></el-tab-pane>
          </el-tabs>
        </div>
      </template>
    </VTable>
  </VPage>
</template>
<script setup name="StatementInventory-balance" lang="jsx">
import { ElMessage, ElMessageBox } from 'element-plus'
import { nextTick, ref, reactive, toRefs } from 'vue'
import multiInput from '@/components/multiInput';
import SelectWarehouse from '@/components/SelectWarehouse'
import { queryWareList, queryLocationList } from './api/index'
import { getEnums } from '@/api/public'
import VImage from '@/components/Image/index.vue'
import { useRouter, useRoute } from 'vue-router';
const route = useRoute()
const router = useRouter()

const timeOption = [
  { label: "更新时间", value: "update_time" },
]

const tabList = [
  {
    label: '库存主表',
    name: 0
  },
  {
    label: '货位库存',
    name: 1
  },
]

const tableRef = ref()
const tableOptins = reactive({
  rowConfig: { height: 80 },
  formConfig: {
    data: {
      timeRange: { type: 'update_time', value: [], range: true },
    }
  },
  columns: [],
  proxyConfig: {
    seq: true,
    props: {
      result: 'data',
      total: 'total',
    },
    ajax: {
      query: async ({ page, form }) => {
        const requestFun = activeName.value === 0 ? queryWareList : queryLocationList
        const res = await requestFun({ ...form, ...page })
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total
          })
        })
      }
    }
  }
})


const initColumns = (type) => {
  if (type == 0) {
    tableOptins.columns = [
      { type: 'seq', title: '序号', width: "80" },
      {
        field: 'inventory_count_order_no', title: '自定义/SKU', width: 220, slots: {
          default: ({ row }) => {
            return <div>
              <div>SKU: {row.sku}</div>
              <div>自定义: {row.custom_sku}</div>
            </div>
          }
        }
      },
      {
        field: 'sku_cn_title', title: '产品名称', width: 180
      },
      {
        field: 'type_cn', title: '图片', width: 90, slots: {
          default: ({ row }) => {
            return <div> {row.image.map(i => {
              return <VImage src={i} width={60} height={60}></VImage>
            })
            } </div>
          }
        }
      },
      {
        field: 'warehouse_name', title: '仓库', width: 120
      },
      {
        field: 'occupy_num', title: '占用', width: 120
      },
      {
        field: 'transit_num', title: '在途库存', width: 120
      },
      {
        field: 'ready_shelve_num', title: '待上架数量', width: 120
      },
      {
        field: 'now_num', title: '当前库存', width: 120
      },
      {
        field: 'num', title: '可用库存', width: 120
      },
      {
        field: 'lock_num', title: '锁库', width: 120
      },
      {
        field: 'ready_shipment_num', title: '待发库存', width: 120
      },
      {
        field: 'weighted_cost', title: '加权成本', width: 120
      },
      {
        field: 'total_cost', title: '总成本', width: 120
      },
      {
        field: 'update_time', title: '更新日期', width: 180
      },
      {
        title: '操作', width: "85", fixed: "right", slots: {
          default: ({ row }) => {
            return <div class="table-option">
              <div>
                <el-button type="primary" link onClick={() => handleLog(row)}>查看记录</el-button>
              </div>
            </div >
          }
        }
      }
    ]
  } else if (type == 1) {
    tableOptins.columns = [
      { type: 'seq', title: '序号', width: "80" },
      {
        field: 'inventory_count_order_no', title: '自定义/SKU', width: 220, slots: {
          default: ({ row }) => {
            return <div>
              <div>SKU: {row.sku}</div>
              <div>自定义: {row.custom_sku}</div>
            </div>
          }
        }
      },
      {
        field: 'sku_cn_title', title: '产品名称', width: 180
      },
      {
        field: 'type_cn', title: '图片', width: 120, slots: {
          default: ({ row }) => {
            return <VImage src={row.image} width={60} height={60}></VImage>
          }
        }
      },
      {
        field: 'warehouse_name', title: '仓库'
      },
      {
        field: 'location_code', title: '货位'
      },
      {
        field: 'num', title: '可用库存'
      },
      {
        field: 'lock_num', title: '锁库'
      },
      {
        field: 'update_time', title: '更新时间'
      },
      {
        field: 'status_cn', title: '库存状态'
      },
      {
        title: '操作', width: "85", fixed: "right", slots: {
          default: ({ row }) => {
            return <div class="table-option">
              <div>
                <el-button type="primary" link onClick={() => handleLog(row)}>查看记录</el-button>
              </div>
            </div >
          }
        }
      }
    ]
  }
}
initColumns(0)

const handleChange = (val) => {
  initColumns(activeName.value)
  isRefresh.value = false
  nextTick(() => {
    isRefresh.value = true
  })
}


const data = reactive({
  options: [],
  activeName: 0,
  isRefresh: true
})
const { options, activeName, isRefresh } = toRefs(data)

// 获取枚举类
const fetchOption = async () => {
  getEnums({
    version: "v1", "name": [
      "base.warehouse"
    ]
  }).then(res => {
    options.value = res.data
  })
}
fetchOption()

const logRef = ref()
const handleLog = (row) => {
  // wms/statement/inventory-balance/ware-log
  // wms/statement/inventory-balance/location-log
  const path = activeName.value == 0 ? '/statement/inventory-balance/ware-log' : '/statement/inventory-balance/location-log'
  router.push({
    path,
    query: {
      sku: row.sku,
      warehouse_id: row.warehouse_id
    }
  })
}

</script>
<style scoped>
:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
}
</style>